<template>
  <div>
    <vue-code-mirror :js="doc.d1"></vue-code-mirror>
  </div>
</template>
<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
export default {
  components: {VueCodeMirror},
  data() {
    let tpl = `
      <div style="display: flex; align-items: center; gap: 10px;">
        <div>这是自定义的组件</div>
        <div>
          <el-input
              v-model="value"
              @change="zfield__onInput"
              v-bind="ui.widgetConfig"
          >        </el-input>
        </div>
        <div>CusCom</div>
      </div>`;

    return {
      doc: {
        d1: `
 import {defZFormFieldCom} from 'pkg-exms/lib/pkg-exms.common';
 defZFormFieldCom('CusCom', {
  create(propConfig) {
    return {
      template: \`${tpl}\`,
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      }
    }
  }`
      }
    }
  }
}
</script>
